<template>
  <el-dialog
    :title="name"
    width="70%"
    top="5vh"
    draggable
    :close-on-press-escape = false
    :close-on-click-modal	= false
    v-model="show"
    @before-close="close"
  >
    <el-form label-width="120px" :model="recordForm" ref="recordForm" v-show="Action === 1">
      <el-form-item label='图片描述:'>
        <el-input type="textarea" :rows="3" v-model="recordForm.product" maxlength="300" placeholder="请输入图片描述 ( AI对中文理解能力有限，请尽量使用英文指令 ) ">
        </el-input>
        <TranslationSelect :text="recordForm.product" :binding="'product'" @translation="translation"></TranslationSelect>
      </el-form-item>
      <div style="display:flex;justify-content: flex-end;">
        <el-button v-if="!loading" style="width:150px;margin-right: 20px;" type="primary" icon="Position" @click="submit">
          提交任务
        </el-button>
        <el-button v-if="loading" style="width:150px;margin-right: 20px;" type="primary">
          AI绘画中
          <el-icon class="is-loading"><Loading /></el-icon>
        </el-button>
      </div>
    </el-form>
    <el-divider  v-show="Action === 1"/>
    <template #footer>
      <div class="demo-image" style="display: flex;flex-wrap: wrap;">
        <div v-for="item in pictureList" :key="item.url" class="block" style="margin:10px;margin:0 auto;">
          <!-- <el-image loading="lazy" decoding="async" style="height: 700px;" :preview-src-list="previewList" :src="item.url"/> -->
          <img :src="item.url" loading="lazy" style="height: 700px;" decoding="async" onerror="this.classList.add('wutu')">
        </div>
      </div>
      <div style="margin-top: 20px;">
        <el-button type="primary" @click="downloadImage(pictureList[0].url)" v-if="pictureList.length > 0">下载图片</el-button>
        <el-button type="info" @click="close" v-if="pictureList.length > 0">关闭</el-button>
      </div>

    </template>
  </el-dialog>
</template>

<script>
import TranslationSelect from './TranslationSelect.vue';
export default {
  components: {
    TranslationSelect,
  },
  props: {
    dialogVisible:{
      type: Boolean,
      default: () => false
    },
    loading:{
      type: Boolean,
      default: () => false
    },
    name:{
      type: String,
      default: () => ''
    },
    Action: {
      type: Number,
      default: () => 1
    },
    pictureList:{
      type: Array,
      default: () => []
    }
  },
  watch:{
    dialogVisible(value){
      this.show = value
    },
    pictureList(value){
      let previewList = []
      value.map(item => {
        previewList.push(item.url)
      })
      this.previewList = previewList
    },
  },
  data(){
    return{
      previewList: [],
      recordForm: {
        product: '',
        language: 'English',
        wordCount: '500',
      },
      show: false
    }
  },
  methods:{
    translation(result){
      if(result){
        this.recordForm[result.binding] = result.translation
      }
    },
    submit(){
      this.$emit('submit', this.recordForm)
    },
    close(){
      this.$emit('closeDialog')
    },
    async downloadImage(path) {
      try {
        // 判断路径是否完整，否则拼接域名
        let url = path.startsWith("http") ? path : window.location.origin + path;
        // 从路径中截取文件名
        const fileName = path.split('/').pop();
        // 下载逻辑
        const res = await fetch(url, { mode: "cors" });
        if (!res.ok) throw new Error("请求失败: " + res.status);
        const blob = await res.blob();
        const blobUrl = URL.createObjectURL(blob);
        const a = document.createElement("a");
        a.href = blobUrl;
        a.download = fileName || "AI_Image.png"; // 默认文件名
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(blobUrl);
        this.$message.success("下载成功");
      } catch (err) {
        this.$message.error("下载失败: " + err.message);
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .relatedConditions{
    display: flex;
    align-items: center;
    height: 95px;
    .conditionname{
      width: 120px;
      height: 30px;
      line-height: 30px;
      color: #409EFF;
      border: 2px solid #409EFF;
      text-align: center;
      border-radius: 20px;
      margin-right: 20px;
    }
  }
  .dialog-footer{
    display: inline-block;
    display: flex;
    align-items: center;
    padding-bottom: 40px;
    .demo-image{
      display: flex;
      .block{
        width: 300px;
      }
    }
  }

  .wutu {
    display: block;
    position: relative;
    width: 300px;
    height: 300px;
}
.wutu::before {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: url('../../assets/errImg.svg') no-repeat center center #fff;
    background-size: contain;
}
</style>
<style>
.el-dialog__header {
  padding: 0;
  margin: 0;
}
.el-dialog.is-draggable .el-dialog__header{
  border-bottom: 1px solid #409EFF;
}
.el-dialog__title{
  display: inline-block;
  width: 180px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background: #409EFF;
  color: #fff;
}
.rounded-checkbox .el-checkbox__inner {
  border-radius: 50%;
}
.rounded-checkbox .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #409EFF;
  border-color: #409EFF;
}
.el-checkbox__input.is-checked + .el-checkbox__label{
  color: #409EFF;
}
.el-dialog__footer {
  margin: 0;
  padding: 0;
  text-align: left;
  margin-left: 20px;
  font-size: 14px;
}
</style>
